{% extends "base.html" %}

{% block extra-head %}
{% if item.meta %}
    <meta name="description" content="{{item.meta}}">
{% endif %}

<script type="text/javascript" src="{{media_url}}/jquery-latest.pack.js"></script>
<script type="text/javascript">
function setPrice(price){
    $("*#price").text(price);
}

function getPrice(){
    opts = {};
    price_options = $("form#options").find("select");
    for (a=0; a<price_options.length; a++){
        opts[price_options[a].name] = price_options[a].value;
    }
    opts["quantity"] = $("input#quantity")[0].value;
    setPrice("loading");
    $.post("{{item.get_absolute_url}}prices/", opts, setPrice);
}

$(document).ready( function(){ getPrice();});
</script>
{% endblock %}

{% load satchmo.thumbnail %}
{% load satchmo.price_display %}
{% load satchmo.currency_filter %}

{% block navbar %}

<a href="{{shop_base}}/">Home</a> 
{% for urls in item.category.all.0.get_url_name %}
    ::<a href="{{urls.1}}">{{ urls.0 }}</a>
{% endfor %}

{% endblock %}

{% block content %}
<h4>{{ item.verbose_name }}</h4>
<p>{{ item.description }}</p>
Price: <h3 id="price">{{item.price}}</h3>
{% for pic in item.itemimage_set.all %}
    <img src="{{media_url}}{{ pic.get_picture_url|thumbnail:"width=280" }}" width="280" />
{% endfor %}

{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
<form id="options" action="{% url satchmo_cart_add item.id %}" method="post">
{% if item.option_group.count %}
<p>Please choose your options:</p>
{% endif %}

{% for option_group in options %}
 {{ option_group.name }}
    <select name="{{ option_group.id }}" id="{{option_group.id}}" onchange="getPrice()">
    {% for choice in option_group.items %}
     <option value="{{ choice.value }}" {% if choice.selected %}selected="selected"{% endif %}>{{ choice.name }}
        {% if choice.price_change %}
            {% option_price choice %}
        {% endif %}
     </option>
    {% endfor %}
    </select>
{% endfor %}
Quantity <input type="text", size="2", name="quantity" id="quantity" value=1 onchange="getPrice()" />
<input type="submit" value="Add to cart" />
</form>
{% endblock %}
